<template>

  <view>
    <view style="margin-bottom: 10px;margin-left: 10px" data-v-5ec756e6="" class="u-demo-result-line"
          @click="show=true">
      当前平台：{{ platformName }}
    </view>
    <u-select v-model="show" :list="list" @confirm="confirmSelect"></u-select>
    <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in thirdMemberList"
          :key="item.id" @click="goProDetail(item)">
      <view style="display: flex">
        <view>
          <u-image width="100px" height="100px" :src="item.avatar"></u-image>
        </view>
        <view>
          <view class="topTitleV"><span class="label">名称:</span>{{ item.nickname }}</view>
          <view class="topTitleV unitV"><span class="label">UID:</span>{{ item.unionId }}</view>
          <view
              style="display: flex; flex: 1; flex-wrap: wrap; margin-top: 0px; margin-left: -8px; height: 38px; width:calc(100vw-62px)">
            <view class="cellView2" @click.stop="toCheckPublish(item)">
              查看视频
            </view>
            <view class="cellView" @click.stop="deleteThirdMember(item.id)">
              删除
            </view>
          </view>
        </view>
      </view>
      <!--        <view class="arrow"></view>-->
    </view>
    <view style="justify-content: center;display: flex">
      <u-button @click="goAddAccount" type="primary" style="position: fixed;bottom: 0;width: 82%;margin-bottom: 10px">
        添加账号
      </u-button>
    </view>
    <u-modal v-model="showIsDelete" :content="content" @confirm="deleteThirdMemberConfirm()" :show-cancel-button="true"></u-modal>
  </view>

</template>

<script>
import $ from "@/utils/api";

const API = require('../../utils/api/douyin.js').default;
export default {
  props: {},
  data() {
    return {
      currentId: null,
      showIsDelete: false,
      content: "你确认要删除此账号吗？",
      page: 1,
      pageSize: 10,
      totalPage: 0,
      show: false,
      platformName: "抖音",
      platformType: 1,
      list: [
        {
          value: '1',
          label: '抖音'
        },
        {
          value: '2',
          label: '快手'
        }
      ],
      src: 'https://img.fscmkjznb.com/materialSharing/1035_1706339596348.jpg',
      thirdMemberList: []
    }
  },
  computed: {
    i18n() {
      return this.$t('cart')
    },
  },
  onLoad(option) {
    console.log(option)
    this.platformType = option.type ? option.type : 1;
    if (this.platformType === "1") {
      this.platformName = "抖音"
    } else if (this.platformType === "2") {
      this.platformName = "快手"
    } else if (this.platformType === "3") {
      this.platformName = "小红书"
    } else if (this.platformType === "4") {
      this.platformName = "视频号"
    } else if (this.platformType === "5") {
      this.platformName = "B站"
    }
    this.getList()
  },
  methods: {
    toCheckPublish(item){
      $.go('/pagesA/thirdAccount/douyin/dyPublish?openId=' + item.openId);
    },
    confirmSelect(e) {
      this.platformName = e[0].label
      this.platformType = e[0].value
      this.getList()
    },
    goAddAccount() {
      $.go('/pagesA/thirdAccount/douyin/addDy?type=' + this.platformType);

    },
    goProDetail(item) {
      this.$emit('click', item)
    },
    getList() {
      const self = this
      $.ajax({
        url: API.getList,
        isAuth: true,
        data: {
          type: self.platformType,
          page: self.page,
          pageSize: self.pageSize,
        },
        method: 'GET',
        success(res) {
          self.thirdMemberList = res.data.list
        }
      })
    },
    deleteThirdMember(id) {
      this.showIsDelete = true
      this.currentId = id
    },
    deleteThirdMemberConfirm() {
      const self = this
      $.ajax({
        url: API.deleteThirdMember,
        data: {id: self.currentId},
        method: 'POST',
        success(res) {
          $.$toast(self.i18n['操作成功']);
          self.getList()
        }
      })
    },
  }
}
</script>

<style scoped>
.uni-list-cell {
  margin: 6px;
  padding: 10px;
  background-color: white
}

.topTitleV {

  height: 26px;
  line-height: 26px;
  color: #333333;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 500;
  font-size: 14px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}

.unitV {
  width: 176px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #555555;
  font-size: 12px;
  margin-top: 0px;
  font-family: PingFangSC-Regular, PingFang SC;

}
.cellView2 {
  margin-top: 29px;
  margin-left: 116px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 2px;
  padding: 0px 4px !important;
  font-size: 12px;

  color: #2a62ef;
  background: #F3F4F6;
}
.cellView {
  margin-top: -22px;
  margin-left: 188px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 2px;
  padding: 0px 4px !important;
  font-size: 12px;

  color: red;
  background: #F3F4F6;
}

.u-demo-result-line {
  border-width: 1px;
  border-color: #ddd;
  border-style: dashed;
  padding: 5px 20px;
  margin-top: 30px;
  border-radius: 5px;
  background-color: #f0f0f0;
  color: #606266;
  font-size: 16px;
  word-break: break-word;
  display: inline-block;
  text-align: left;
}

.label {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 13px;
  font-weight: bold;
}

.arrow {
  width: 10px;
  height: 10px;
  border: 2px solid #888;
  border-left-width: 0;
  border-bottom-width: 0;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
}

</style>
